<template>
  <div class="dialog_mail_choose_had">
    <el-form :inline="true" ref="mailListData" :model="mailListForm" >
      <el-form-item class="block-line">
        <el-col :span="8">
          <el-input v-model="mailListForm.title" placeholder="输入标题关键字搜索"></el-input>
        </el-col>
        <el-col :span="3"><el-button style="margin-left:10px" @click="submitMailList('mailListForm')">搜索</el-button></el-col>
      </el-form-item>
    </el-form>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="mailList.list" stripe class="table">
      <el-table-column label="标题" width="" prop="title">
        <template slot-scope="scope">
          <div class="mail-title" slot="reference">
            <a @click="$router.push({name: 'ViewMail', params: {id: scope.row.id}})" href="javascript:;">{{scope.row.title}}</a>
            <div class="mail-hot" v-if="scope.row.top==1">顶</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80"  class-name="is-center mail-opra">
        <template slot-scope='scope'>
          <el-button type='text' @click="useMail(scope.row)">使用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="mailListForm.page"
        :page-size.sync="mailListForm.size"
        layout="total, prev, pager, next, jumper"
        :total="mailList.page.total"
        @current-change="submitMailList('mailListForm')">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapMutations} from 'vuex'
  export default {
    data () {
      return {
        mailListData: {
          title: this.mailListForm.title,
          page: this.mailListForm.page,
          size: this.mailListForm.size
        },
        tbLoading: false
      }
    },
    props: ['mailList', 'mailListForm', 'mailForm'],
    mounted () { },
    watch: {
      sel (val) {
        this.SELECT_SOURCE({id: val})
      }
    },
    methods: {
      ...mapMutations(['SELECT_SOURCE']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD hh:mm:ss')
      },
      submitMailList (mailListData) {
        this.$emit('refreshbizlines', mailListData)
      },
      // 使用
      useMail (o) {
        this.mailForm.dialogChooseMail = false
        this.$emit('usecontent', o)
      }
    }
  }
</script>
<style lang="scss">
  .dialog_mail_choose_had{
    .mail{
      &-title{display: inline-block;
        a{
          color: rgb(31, 45, 61);
          text-decoration: none;
          &:hover{
            color: #20a0ff;
          }
        }
      }
      &-hot{display: inline-block; background: #ff0000; font-size: 10px;width: 14px;height: 14px;line-height: 13px; text-align: center; color: #fff; float: right; margin-left: 10px;}
      &-opra{
        min-width: 220px!important;
        .el-button{
          min-width: 60px;
        }
      } 
    }
  }
</style>
